{% extends "layout.html" %}
{% block title %}Battle!{% endblock %}
{% block scripts %}
{{super()}}
<script type="text/javascript">
FRAME_URL = "{{battle.get_frame_url()}}";
BATTLE_LENGTH = {{battle.length}};
critter_names = [];
{% for i in range(battle.get_critters()|length) %}
	{% if (critters[i] == battle.get_winner())%}
		winner_index = {{i}};
	{% endif %}
		critter_names.push("{{critters[i].name}}");
{% endfor %}
</script>
<script type="text/javascript" src="{{url_for('static', filename='js/battle_viewer.js')}}">
</script>
{% endblock %}
{% block body %}

<h1>BATTLE</h1>
<section>
	<h3>{{battle.get_pretty_time()}}</h3>
	<div id="abovebar">
		<a id="resetbutton">Reset</a>
		<a id="backbutton">Last Frame</a>
		<a id="rewindbutton">Rewind</a>
		<a id="stopbutton">Stop</a>
		<a id="playbutton">Play</a>
		<a id="nextbutton">Next Frame</a>
		<a id="skipbutton">Skip 100</a>
		<span id="framecounter"></span>
		<div class="clear"></div>
	</div>

	<canvas id="battlefield" width="{{battle.width * 5}}px" height="{{battle.height * 5}}px"></canvas>

	<div id="sidebar")>
		{% for i in range(critters|length) %}
		<div class="critterlabel" id="critterlabel{{i}}">
			{{critters[i].name}}
			<span class="crittercounter" id="crittercounter{{i}}"></span>
		</div>
		{% endfor %}
	</div>

	<div id="belowbar">
		<span id="loadcounter"></span>
	</div>
</section>


{% endblock %}